<template>
  <view class="full-page-alert" :style="{backgroundImage: `url(${staticImgs.bg})`}">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
    <view class="full-page-main">
      <view class="tit-wrapper">
        <view class="tit-box">测前须知</view>
        <view class="scroll-content">
          <view class="bold-text">在做题过程中，请注意以下几点： </view>
          <view class="text-main">1.请根据你最近一周的实际情况填写本问卷。</view>
          <view class="text-main">2.请仔细阅读题目。在了解题目意思后，根据最近一周的情况选择最符合的选项，答案没有对错之分，如实作答即可。</view>
          <view class="text-main">3.如在答题过程中因电话呼入、系统卡顿等导致测试中断，可重新进入小程序测试。</view>
          <template v-if="referenceList && referenceList.length > 0">
            <view class="text-main">4.本测试参考文献如下：</view>
            <view class="text-main" v-for="(item,index) in referenceList" :key="index">
              [{{index+1}}]{{item}}
            </view>
          </template>
        </view>
      </view>
      <image class="confirm-btn" @click="confirmFullTip" :src="staticImgs.btn"/>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      referenceList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        navigationBarDataInfo: {
          "bg_color": "rgba(0,0,0,0)",
          "color": "#333",
          "flag": 1,
          "name": "",
          "hasEntity": true
        },
        staticImgs: {
          bg: this.imgBaseURL + '/scl/question-page/goddess/notice-bg.png',
          btn: this.imgBaseURL + '/scl/question-page/goddess/notice-btn.png'
        }
      }
    },
    methods: {
      confirmFullTip() {
        this.$emit('ok')
      },
      backHandle() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .full-page-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: {
      size: 100% 100%;
      position: center top;
      repeat: no-repeat;
    }
    z-index: 999;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .full-page-main {
      display: flex;
      flex-direction: column;
      padding: 100rpx 0 92rpx;
      height: 100%;
      box-sizing: border-box;
    }

    .tit-wrapper {
      flex: 1 0 auto;
    }

    .tit-box {
      text-align: center;
      font-weight: bolder;
      font-size: 40rpx;
      color: #630527;
      line-height: 56rpx;
      letter-spacing: 4rpx;
      margin: 50rpx 0;
    }

    .scroll-content {
      padding: 0 50rpx;

      .bold-text {
        font-weight: bolder;
        font-size: 30rpx;
        color: #630527;
        line-height: 42rpx;
        letter-spacing: 3rpx;
        margin-bottom: 30rpx;
      }

      .text-main {
        font-size: 30rpx;
        color: #630527;
        line-height: 46rpx;
        letter-spacing: 3rpx;
        text-align: justify;
      }
    }

    .confirm-btn {
      flex: 0 0 auto;
      width: 460rpx;
      height: 116rpx;
      margin: 0 auto;
    }
  }
</style>